<template>
  <div>



	<section class="featured-block text-center">
		<div class="container">
			

            <div>

                <!-- <img :src="src" alt=""> -->
                <Avatar :src='src' :width='150' fit='fill'></Avatar>  

            </div>

            <div>
                <table>

                    <tr>

                        <td>

                            用户头像

                        </td>

                        <td>

                            <input type="file" @change='upload'>
                            
                        </td>

                    </tr>








                </table>
            </div>



		</div>
	</section>
	

	

	
  
		
		

    
  </div>
  
</template>


 
<script>




export default {
  data () {
    return {
      msg: "这是一个变量",

      src:'',
    }
  },

  mounted:function(){

   
  
},
  methods:{


      //请求后台接口
      upload(e){
          //获取文件
          let file = e.target.files[0];
          //声明表单参数
          let param = new FormData();

          param.append('file',file,file.name);

          //声明请求头
          let config = {headers:{'Content-Type':'multipart/form-data'}}

          //请求后台接口
          this.axios.post('http://localhost:8000/uploads/',param,config).then(res=>{
              this.$Message(res.data.mes)
              console.log(res);
              this.src = 'http://127.0.0.1:8000/static/upload/'+res.data.filename

          })

      },
     
  }
}


</script>
 
<style>

td {
    padding: 10px;
}

</style>